<template>
    <div>
        <!-- 头部 -->
        <!-- <div class="top_tab1">
            <div class="left1" @click="back()">
                <img  src="../assets/order_center/shangs.png">
            </div>
            <span>债事备案</span>
            <div class="right1">
            </div>
        </div> -->
        <!-- <div class="n"></div> -->
        <div class="recotabm">
            <div class="recotabtop">
                <div class="recotext">债事金额<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div><input type="text" v-model="money" placeholder="请输入债事金额"></div>
            </div>
            <div class="recotabtop">
                <div class="recotext">姓名<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div><input type="text" v-model="name" placeholder="请输入您的姓名"></div>
            </div>
            <div class="recotabtop">
                <div class="recotext">手机号<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div><input type="text" v-model="phone" placeholder="请输入手机号"></div>
            </div>
            <div class="recotabtop">
                <div class="recotext">所在地<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div><input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="请选择所在地"></div>
            </div>
            <yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
            <div class="recobtnb">
                <div class="recobtnqueren" @click="beian()">确认</div>
                <div class="recobtnquxiao" @click="back()">取消</div>
            </div>
        </div>
        <div class="recoegtext">例如：</div>
        <div class="recoeg">
            <div class="recoegtop">
                <div>债事金额<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div>1000万</div>
            </div>
            <div class="recoegtop">
                <div>姓名<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div>张三</div>
            </div>
            <div class="recoegtop">
                <div>手机号<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div>15888888888</div>
            </div>
            <div class="recoegtop">
                <div>所在地<span style="display:inline-block;width:100%;height:0;"></span></div>
                <div>广州省 广州市 花都区</div>
            </div>
        </div>
        <div class="recoegtext">您提供的信息，我们第一时间推送给您身边的分/支行！</div>
        <div class="recobottom">为国家消防 为企业消债 为人民消灾 为自己积德</div>
    </div>
</template>
<script>
import Vue from 'vue';
import {CitySelect} from 'vue-ydui/dist/lib.rem/cityselect';
Vue.component(CitySelect.name, CitySelect);
import District from 'ydui-district/dist/jd_province_city_area_id';
export default {
  name: "records",
  data() {
    return {
        money:'', 
        name:'',
        phone:'',
        show1: false,
        model1: '',
        district: District
    };
  },
  methods: {
    result1(ret) {
        this.model1 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
    },
    back: function() {
      this.$router.go(-1);
    },
    //备案提交
    beian(){
      let self = this;
      let url = "/api/debt/record";
      if(!this.money){
        this.$dialog.toast({
            mes: '请输入备案金额！',
            timeout: 1500
        });
        return
      }
      if(!this.name){
        this.$dialog.toast({
            mes: '请输入姓名！',
            timeout: 1500
        });
        return
      }
      if(!this.phone){
        this.$dialog.toast({
            mes: '请输入手机号！',
            timeout: 1500
        });
        return
      }
      if(!this.model1){
        this.$dialog.toast({
            mes: '请选择所在地！',
            timeout: 1500
        });
        return
      }
			self.httpPost(url,{user_id:this.user_id,token:this.token,debt_price:this.money,name:this.name,phone:this.phone,address:this.model1},function(res) {
				if (res.code == 200) {   
					 self.$dialog.toast({
                mes: res.msg,
                timeout: 1000,
                icon: 'success'
            });
            setTimeout(() => {
                self.back();
            }, 1500);
				}else{
				   self.$dialog.toast({
              mes: res.msg,
              timeout: 1000,
              icon: 'error'
          });
				} 
      })
    }
  } ,
  created(){
    document.title = "债事备案";  
    this.user_id = localStorage.getItem('myid');
    this.token = localStorage.getItem('mytoken');
  } 
};
</script>
<style>
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}
.n {
  height: 0.92rem;
}
.recotabm {
  padding: 0 0.2rem;
  background: #fff;
}
.recotabtop {
  height: 1.08rem;
  line-height: 1.08rem;
  display: flex;
  font-size: 0.3rem;
  border-bottom: 1px solid #ddd;
}
.recotext {
  width: 18%;
  text-align: justify;
  margin-right: 0.78rem;
  color: #333;
}
.recotabtop input {
  border: none;
}
.recobtnb {
  height: 1.08rem;
  line-height: 1.08rem;
  display: flex;
  justify-content: center;
}
.recobtnb div {
  width: 1.2rem;
  height: 0.62rem;
  text-align: center;
  line-height: 0.62rem;
  margin: auto 0.3rem;
  font-size: 0.25rem;
  border-radius: 0.1rem;
}
.recobtnqueren {
  color: #fff;
  background: #e63f3f;
}
.recobtnquxiao {
  color: #999;
  background: #ddd;
}
.recoegtext {
  width: 90%;
  margin: 0.3rem auto 0.2rem;
  font-size: 0.27rem;
  color: #e63f3f;
}
.recoeg {
  width: 90%;
  height: 3.53rem;
  padding: 0.3rem 0.3rem;
  background: #fff;
  border-radius: 0.3rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.recoegtop {
  height: 0.35rem;
  display: flex;
  font-size: 0.3rem;
}
.recoegtop > div:first-child {
  width: 20%;
  text-align: justify;
  margin-right: 0.78rem;
  color: #333;
}
.recoegtop > div:last-child {
  color: #999;
}
.recobottom {
  width: 90%;
  margin: .3rem auto;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  color: #fff;
  background: #e63f3f;
  border-radius: .2rem;
  font-size:.3rem;
}
</style>
